<template lang="pug">
  div#Task
    div.top-header
      div.current-date(@click="$router.push('/dailyTasks')") 这里是个日历
      i.iconfont.icon-rili
    div.banner
      swiper(:options="swiperOption" ,ref="mySwiper")
        swiper-slide(v-for="(item,index) in banners", :key="index")
          img(:src="item")
        div.swiper-pagination(slot="pagination")
    div.task-block
      div.task-list(v-for="item in taskData")
        div.task-order
          span NO.{{item.taskIndex}}
          i.iconfont(:class="[item.ifRemind ? 'icon-tixing' : 'icon-butixing']")
        div.task-content
          span.task-title.task-text {{item.taskTitle}}
          span.task-text
            i.iconfont.icon-rili
            span {{item.taskStar}} - {{item.taskEnd}}
          span.task-text
            i.iconfont.icon-rili
            span 坚持{{item.taskTarget}}
        div.task-btn.task-btn-complete(v-if="item.ifComplete") 已完成
        div.task-btn.task-btn-uncompleted(v-else) 完成
    div.diary-block
      span.diary-btn() 每日小结
    actionBar(:navIndex = 'navIndex')
</template>
<script>
  import actionBar from '@/components/actionBar.vue'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    data() {
      return {
        navIndex: 2,
        swiperOption: {
          autoplay: true,
          notNextTick: true,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          onSlideChangeEnd: swiper => {
            this.page = swiper.realIndex + 1
            this.index = swiper.realIndex
          }
        },
        banners: [
          require('@/assets/banner01.png'),
          require('@/assets/banner02.png')],
        taskData: [{
          taskIndex: 1,
          ifRemind: true,
          taskTitle: '晨跑',
          taskStar: '07:20',
          taskEnd: '09:00',
          taskTarget: '一个月',
          ifComplete: false
        }, {
          taskIndex: 2,
          ifRemind: false,
          taskTitle: '午休读书',
          taskStar: '07:20',
          taskEnd: '09:00',
          taskTarget: '一周',
          ifComplete: true
        }]
      }
    },
    components: {
      actionBar,
      swiper,
      swiperSlide
    }
  }

</script>
<style scoped lang="less">
  #Task {
    .top-header {
      .current-date{
        float: left;
      }
      .icon-rili {
        float: right;
      }
    }
    .banner {
      margin-bottom: 5px;
      img {
        display: block;
        height: 200px;
        width: 100%;
      }
    }
    .task-block {
      .task-list {
        padding: 10px 20px;
        border-bottom: 1px solid #f5f5f5;
        background: #fff;
        overflow: hidden;
        position: relative;
        .task-order {
          height: 60px;
          float: left;
          background: #080c15;
          width: 60px;
          border-radius: 50%;
          position: relative;
          span {
            color: #fff;
            line-height: 60px;
            font-size: 15px;
            font-weight: bold;
          }
          .iconfont {
            font-size: 20px;
            color: #ff0300;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        .task-content {
          float: left;
          margin-left: 10px;
          .task-text {
            float: left;
            clear: both;
            line-height: 20px;
            .iconfont {
              font-size: 10px;
              color: #9c9c9c;
            }
            span {
              font-size: 12px;
              color: #9c9c9c;
              margin-left: 10px;
            }
          }
          .task-title {
            font-size: 15px;
          }
        }
        .task-btn {
          position: absolute;
          right: 20px;
          height: 30px;
          width: 50px;
          line-height: 30px;
          color: #fff;
          top: 50%;
          margin-top: -15px;
          font-size: 12px;
        }
        .task-btn-complete {
          background: #9c9c9c;
        }
        .task-btn-uncompleted {
          background: #080c15;
        }
      }
    }
    .diary-block {
      padding: 20px;
      .diary-btn {
        height: 35px;
        width: 100%;
        background: #080c15;
        color: #fff;
        font-size: 13px;
        display: block;
        line-height: 35px;
      }
    }
  }
</style>
